@import './html.scss';
@import './variables.scss';
@import './color.scss';
@import './layout.scss';
@import './custom.scss';
@import './btn.scss';

#app {
  width: 100%;
  height: 100%;
  background-color: #e2e2e2;
}

// 自定义的盒模型
.box {
  position: relative;
  background: linear-gradient(to left, #0a5158, #0a5158) left top no-repeat,
    linear-gradient(to bottom, #0a5158, #0a5158) left top no-repeat,
    linear-gradient(to left, #0a5158, #0a5158) right top no-repeat,
    linear-gradient(to bottom, #0a5158, #0a5158) right top no-repeat,
    linear-gradient(to left, #0a5158, #0a5158) left bottom no-repeat,
    linear-gradient(to bottom, #0a5158, #0a5158) left bottom no-repeat,
    linear-gradient(to left, #0a5158, #0a5158) right bottom no-repeat,
    linear-gradient(to left, #0a5158, #0a5158) right bottom no-repeat;
  background-size: 0.2rem 0.8rem, 0.8rem 0.2rem, 0.2rem 0.8rem, 0.8rem 0.2rem;
  background-color: #00000020;
  border: 0.1rem solid #06363b50;
  box-shadow: 0 0 0.6rem 0rem #ffffff10 inset;
  .box-title {
    width: 100%;
    // background: #00000060;
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0)
    );
    font-size: 1rem;
    text-align: center;
    margin: 0 auto;
    padding: 0.5rem 0;
    color: #3dc4d3;
    // border-radius: 0 0 1rem 1rem;
  }
  .light-line {
    height: 0.1rem;
    /* 浏览器不支持的时候显示 */
    // background-color: rgb(0, 0, 0, 0);
    /* 标准的语法（必须放在最后） */
    background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0)
    );
  }
  .box-content {
    text-align: center;
    padding: 1rem;
  }
}
